<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>MooModernizr 1.1 - Mootools CSS3 feature detection</title>

<script src="mootools-1.2.3-core.js" type="text/javascript"></script>
<script src="mooModernizr-min.js" type="text/javascript"></script>
<script src="lighterjs/Lighter.js" type="text/javascript"></script>

<script type="text/javascript">

window.addEvent('domready',function(){

	document.id('tests').getChildren('li').each(function(el){
		var test = el.get('text').split(' ')[0];
		el.set('text',el.get('text').replace(test,''));
		new Element('a',{href:'#'+test,text:test}).inject(el,'top');
		new Element('img',{src: (Browser.Features[test] ? 'yes.png' : 'no.png')}).inject(el,'top');
	});	

	document.id('inputtests').getChildren('li').each(function(el){
		var test = el.get('text').split(' ')[0];
		new Element('img',{src: (Browser.Features.inputtypes[test] ? 'yes.png' : 'no.png')}).inject(el,'top');
	});
	
	document.id('inputattrs').getChildren('li').each(function(el){
		var test = el.get('text').split(' ')[0];
		new Element('img',{src: (Browser.Features.inputattributes[test] ? 'yes.png' : 'no.png')}).inject(el,'top');
	});
	
	$$('pre').light({
			altLines: 'hover',
			mode: 'ol',
			path: 'lighterjs/',
			flame: 'panic'
		});

});

</script>

<link  href="style.css" rel="stylesheet" type="text/css" media="screen" />

</head>
<body>

<h1>MooModernizr 1.1</h1>
<h2 class="subtitle">Mootools HTML5/CSS3 feature detection</h2>

<p>
	MooModernizr 1.1 tests the browser&#39;s CSS3 and HTML5 capabilities. 
	This by extending MooTools&#39; <code>Browser.Features</code> object
	with a variety of CSS3 and HTML5 features. It is a
	<a href="http://www.mootools.net">MooTools 1.2</a> port 
	of <a href="http://www.modernizr.com/">Modernizr 1.1</a>. 
	However some functionallity of Modernizr does not fit into the Browser.Features
	object. But I will explain 	how you can add this functionallity yourself 
	whith some examples below.
	
</p>

<h2>List of CSS3/HTML5 feature tests</h2>

<ul id="tests">
	<li>canvas</li>
	<li>canvastext</li>
	<li>geolocation</li>
	<li>rgba</li>
	<li>hsla</li>
	<li>multiplebgs</li>
	<li>borderimage</li>
	<li>borderradius</li>
	<li>boxshadow</li>
	<li>textshadow</li>
	<li>opacity</li>
	<li>cssanimations</li>
	<li>csscolumns</li>
	<li>cssgradients</li>
	<li>cssreflections</li>
	<li>csstransforms</li>
	<li>csstransforms3d</li>
	<li>csstransitions</li>
	<li>localstorage</li>
	<li>sessionstorage</li>
	<li>webworkers</li>
	<li>applicationcache</li>
	<li>offlinedetection</li>
<!--	<li>draganddrop</li>-->
	<li>postmessage</li>
	<li>webdatabase</li>
<!--	<li>hashchange</li> -->
	<li>query - use native selector engine document.querySelecotorAll()</li>
	<li>json - use native JSON</li>	
	<li>inputtypes - does the user agent support any html5 inputtype(s)</li>
	<li>inputattributes - does the user agent support attributes like autocomplete</li>
	<li>video tag</li>
	<li>audio tag</li>
<!--	<li>fontface</li> -->
</ul>

<h3>List of HTML5 input type tests</h3>

<p>
	The inputtypes is an object <code>Browser.Features.inputtypes</code>. 
	So the types can be accessed by <code>Browser.Features.inputtypes.search</code> 
</p>

<ul id="inputtests">
	<li>search</li>
	<li>tel</li>
	<li>url</li>
	<li>email</li>
	<li>datetime</li>
	<li>date</li>
	<li>month</li>
	<li>week</li>
	<li>time</li>
	<li>datetime-local</li>
	<li>number</li>
	<li>range</li>
	<li>color</li>
</ul>

<h3>List of HTML5 input attributes tests</h3>
<p>
	The inputattrubutes is an object <code>Browser.Features.inputattrubutes</code>. 
	So the types can be accessed by <code>Browser.Features.inputattrubutes.autocomplete</code> 
</p>
<ul id="inputattrs">
	<li>autocomplete</li>
	<li>autofocus</li>
	<li>list</li>
	<li>placeholder</li> 
	<li>max</li>
	<li>min</li>
	<li>multiple</li>
	<li>pattern</li>
	<li>required</li>
	<li>step</li>
</ul>

<img src="yes.png" alt="Yes" />: Your Browser supports this feature<br />
<img src="no.png" alt="No" />: To bad, your browser does not support this feature (yet)

<h2>Basic usage</h2>

<p>
	You can use the new test just like <code>Browser.Features.xpath</code> and <code>Browser.Features.xhr</code> (<a href="http://mootools.net/docs/core/Core/Browser#Browser">link</a>).
</p>

<pre class="js">
// Does the browser support textshadow
alert(Browser.Features.textshadow);

// Does the browser support cssclumns
alert(Browser.Features.csscolumns);

if(!Browser.Features.borderradius){
	// Do something... (http://www.phatfusion.net/roundedcorners/)
	var box = new RoundedCorners('.roundedContent', {radius: 49});
}
</pre>


<h2>Dependencies</h2>
<ul>
	<li>
		Mootools 1.2.x
		<ul>
			<li>Core</li>
			<li>Browser</li>
			<li>Element</li>
		</ul>
	</li>
</ul>

<h2>Download &amp; links</h2>

<ul>
	<li>Full, uncompressed version <a href="Source/mooModernizr.js">mooModernizr.js</a> (14,6 kb) (if you want to add/delete/edit tests)</li>
	<li>Minified version <a href="mooModernizr-min.js">mooModernizr-min.js</a>  (8.3 kb)</li>
	<li>Look at the source at <a href="http://code.google.com/p/awfmootools/source/browse/tags/mooModernizr/1.1/">Google Code</a></li>
	<li>Follow the discussion at <a href="http://www.mooforum.net/scripts12/moomodernizr-t2015.html">mooforum.net</a></li>
	<li>Download at <a href="http://www.esteak.net/plugin/MooModernizr">eSteak</a></li>	
</ul>

<h2>Previous versions</h2>
<ul>
	<li><a href="0.9">MooModernizr 0.9</a></li>
	<li><a href="1.0">MooModernizr 1.0</a></li>
</ul>


<h2>Docs</h2>

<p>
	Most of the tests return <code>true</code> or <code>false</code>. But some tests 
	return a string. For example borderradius. As you can see 
	<a href="http://www.the-art-of-web.com/css/border-radius/">here</a>, Firefox 
	uses another attribute for <code>border-top-left-radius</code>: 
	<code>-moz-border-radius-topleft</code>. To detect this, <code>Browser.Features.borderradius</code> 
	returns <code>MozBorderRadiusTopright</code> in Firefox. With this you can 
	create another <em>if-else</em>. The browser prefixes which are used are Moz, moz, webkit, o and ms.
</p>

<p>
	<strong>Note:</strong> You also might be interested in 
	the <a href="http://www.modernizr.com/docs/">Modernizr docs</a>
</p>

<div class="docs">
	
	<a name="canvas"></a><h3>canvas</h3>
	<div class="section">		
		<h4>Syntax</h4>
		<code>Browser.Features.canvas</code>
		<h4>Returns</h4>
		(boolean)
	</div>
	
	<a name="canvastext"></a><h3>canvastext</h3>
	<div class="section">
		<h4>Syntax</h4>
		<code>Browser.Features.canvastext</code>
		<h4>Returns</h4>
		(boolean)
	</div>
	
	<a name="geolocation"></a><h3>geolocation</h3>
	<div class="section">
		<h4>Syntax</h4>
		<code>Browser.Features.geolocation</code>
		<h4>Returns</h4>
		(boolean)
	</div>
	
	<a name="rgba"></a><h3>rgba</h3>
	<div class="section">
		<h4>Syntax</h4>
		<code>Browser.Features.rgba</code>
		<h4>Returns</h4>
		(boolean)
	</div>
	
	<a name="hsla"></a><h3>hsla</h3>
	<div class="section">
		<h4>Syntax</h4>
		<code>Browser.Features.hsla</code>
		<h4>Returns</h4>
		(boolean)
	</div>
	
	<a name="multiplebgs"></a><h3>multiplebgs</h3>
	<div class="section">
		<h4>Syntax</h4>
		<code>Browser.Features.multiplebgs</code>
		<h4>Returns</h4>
		(boolean)
	</div>
	
	<a name="borderimage"></a><h3>borderimage</h3>
	<div class="section">
		<h4>Syntax</h4>
		<code>Browser.Features.borderimage</code>
		<h4>Returns</h4>
		(string) - The element.style property name e.g. webkitBorderImage
	</div>
	
	<a name="borderradius"></a><h3>borderradius</h3>
	<div class="section">
		<h4>Syntax</h4>
		<code>Browser.Features.borderradius</code>
		<h4>Returns</h4>
		<ul>
			<li>(string) - The element.style property name e.g. webkitBorderRadius</li>
			<li>(boolean) - false if borderradius not supported at all</li>
		</ul>		
	</div>
	
	<a name="textshadow"></a><h3>textshadow</h3>
	<div class="section">
		<h4>Syntax</h4>
		<code>Browser.Features.textshadow</code>
		<h4>Returns</h4>
		<ul>
			<li>(string) - The element.style property name e.g. textShadow</li>
			<li>(boolean) - false if textshadow not supported at all</li>
		</ul>		
	</div>
	
	<a name="opacity"></a><h3>opacity</h3>
	<div class="section">
		<h4>Syntax</h4>
		<code>Browser.Features.opacity</code>
		<h4>Returns</h4>
		(boolean) - true if supported, false if unsupported
	</div>
	
	<a name="cssanimations"></a><h3>cssanimations</h3>
	<div class="section">
		<h4>Syntax</h4>
		<code>Browser.Features.cssanimations</code>
		<h4>Returns</h4>
		<ul>
			<li>(string) - The element.style property name e.g. webkitAnimationName</li>
			<li>(boolean) - false if cssanimations not supported at all</li>
		</ul>
	</div>
	
	<a name="csscolumns"></a><h3>csscolumns</h3>
	<div class="section">
		<h4>Syntax</h4>
		<code>Browser.Features.csscolumns</code>
		<h4>Returns</h4>
		<ul>
			<li>(string) - The element.style property name e.g. MozColumnCount</li>
			<li>(boolean) - false if csscolumns not supported at all</li>
		</ul>
	</div>

	<a name="cssgradients"></a><h3>cssgradients</h3>
	<div class="section">
		<h4>Syntax</h4>
		<code>Browser.Features.cssgradients</code>
		<h4>Returns</h4>
		(boolean)
	</div>
	
	<a name="cssreflections"></a><h3>cssreflections</h3>
	<div class="section">
		<h4>Syntax</h4>
		<code>Browser.Features.cssreflections</code>
		<h4>Returns</h4>
		<ul>
			<li>(string) - The element.style property name e.g. webkitBoxReflect</li>
			<li>(boolean) - false if cssreflections not supported at all</li>
		</ul>
	</div>
	
	<a name="csstransforms"></a><h3>csstransforms</h3>
	<div class="section">
		<h4>Syntax</h4>
		<code>Browser.Features.csstransforms</code>
		<h4>Returns</h4>
		<ul>
			<li>(string) - The element.style property name e.g. MozTransform</li>
			<li>(boolean) - false if csstransforms not supported at all</li>
		</ul>
	</div>
	
	<a name="csstransforms3d"></a><h3>csstransforms3d</h3>
	<div class="section">
		<h4>Syntax</h4>
		<code>Browser.Features.csstransforms3d</code>
		<h4>Returns</h4>
		<ul>
			<li>(string) - The element.style property name e.g. webkitPerspective or perspectiveProperty</li>
			<li>(boolean) - false if csstransforms3d not supported at all</li>
		</ul>
	</div>
	
	<a name="csstransitions"></a><h3>csstransitions</h3>
	<div class="section">
		<h4>Syntax</h4>
		<code>Browser.Features.csstransitions</code>
		<h4>Returns</h4>
		<ul>
			<li>(string) - The element.style property name e.g. webkitTransitionProperty</li>
			<li>(boolean) - false if csstransitions not supported at all</li>
		</ul>
	</div>
	
	<a name="video"></a><h3>video</h3>
	<div class="section">
		<h4>Syntax</h4>
		<code>Browser.Features.video</code>
		<h4>Returns</h4>
		<ul>
			<li>(object)
				<ul>
					<li><span style="text-decoration: line-through;">supported: (boolean)</span></li>
					<li>ogg: (string) - 'probably', 'maybe' or '' if the browser cannot play this type) - can the browser play Theora Vorbis .ogv files</li>
					<li>h264: (string)  - 'probably', 'maybe' or '' if the browser cannot play this type) - can the browser play h264 encoded/mp4 files</li>
					<li><span style="text-decoration: line-through;">mp4</span>: Does not exists anymore, renamed to wav to keep in line with Modernizr</li>
				</ul>
			</li>
			<li>(boolean) - false if video is not supported</li>
		</ul>
	</div>
	
	<a name="audio"></a><h3>audio</h3>
	<div class="section">
		<h4>Syntax</h4>
		<code>Browser.Features.audio</code>
		<h4>Returns</h4>
		<ul>
			<li>(object)
				<ul>
					<li><span style="text-decoration: line-through;">supported: (boolean)</span></li>
					<li>ogg: (string) - 'probably', 'maybe' or '' if the browser cannot play this type) - can the browser play Vorbis .ogg files</li>
					<li>mp3: (string) - 'probably', 'maybe' or '' if the browser cannot play this type) - can the browser play .mp3 files</li>
					<li>wav: (string) - 'probably', 'maybe' or '' if the browser cannot play this type) - can the browser play WAVE files</li>
					<li><span style="text-decoration: line-through;">wave</span>: Does not exists anymore, renamed to wav to keep in line with Modernizr</li>
					<li>m4a: (string) - 'probably', 'maybe' or '' if the browser cannot play this type) - can the browser play .m4a files</li>
				</ul>
			</li>
			<li>(boolean) - false if audio is not supported</li>
		</ul>
	</div>

	<a name="localstorage"></a><h3>localstorage</h3>
	<div class="section">
		<p>
			Test for <a href="http://dev.w3.org/html5/webstorage/">Local Storage</a>
		</p>
		<h4>Syntax</h4>
		<code>Browser.Features.localstorage</code>
		<h4>Returns</h4>
		(boolean)
	</div>

	<a name="sessionstorage"></a><h3>sessionstorage</h3>
	<div class="section">
		<p>
			Test for <a href="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute">Session Storage</a>
		</p>
		<h4>Syntax</h4>
		<code>Browser.Features.sessionstorage</code>
		<h4>Returns</h4>
		(boolean)
	</div>

	<a name="webworkers"></a><h3>webworkers</h3>
	<div class="section">
		<p>
			Test for <a href="http://www.whatwg.org/specs/web-workers/current-work/">Web Workers</a>
		</p>
		<h4>Syntax</h4>
		<code>Browser.Features.webworkers</code>
		<h4>Returns</h4>
		(boolean)
	</div>

	<a name="applicationcache"></a><h3>applicationcache</h3>
	<div class="section">
		<p>
			Test for <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline">Offline Web Applications</a>
		</p>
		<h4>Syntax</h4>
		<code>Browser.Features.applicationcache</code>
		<h4>Returns</h4>
		(boolean)
	</div>
	
	<a name="offlinedetection"></a><h3>offlinedetection</h3>
	<div class="section">
		<p>
			Test for <a href="http://www.w3.org/TR/2008/WD-html5-20080610/diff/offline.html#navigator.online">navigator.onLine</a>. 
			This test will return false if the user agent will not contact the network when the user follows links or when a script requests a remote page (or knows that such an attempt would fail), and must return true otherwise.
		</p>
		<h4>Syntax</h4>
		<code>Browser.Features.offlinedetection</code>
		<h4>Returns</h4>
		(boolean)
	</div>
<!--
	<a name="draganddrop"></a><h3>draganddrop</h3>
	<div class="section">
		<p>
			Test if the browsers supports drag and drop events
		</p>
		<h4>Syntax</h4>
		<code>Browser.Features.draganddrop</code>
		<h4>Returns</h4>
		(boolean)
	</div>
-->
	<a name="postmessage"></a><h3>postmessage</h3>
	<div class="section">
		<p>
			Test if the browsers supports <a href="https://developer.mozilla.org/en/DOM/window.postMessage">window.postMessage</a>, is a method for safely enabling cross-origin communication.
		</p>
		<h4>Syntax</h4>
		<code>Browser.Features.postmessage</code>
		<h4>Returns</h4>
		(boolean)
	</div>
	
	<a name="webdatabase"></a><h3>webdatabase</h3>
	<div class="section">
		<p>
			Test if the browsers supports <a href="http://www.w3.org/TR/2008/WD-html5-20080610/structured.html#database0">Database storage</a>
		</p>
		<h4>Syntax</h4>
		<code>Browser.Features.webdatabase</code>
		<h4>Returns</h4>
		(boolean)
	</div>
<!--
	<a name="hashchange"></a><h3>hashchange</h3>
	<div class="section">
		<p>
			Test if the browser supports the hashchange event
		</p>
		<h4>Syntax</h4>
		<code>Browser.Features.hashchange</code>
		<h4>Returns</h4>
		(boolean)
	</div>
-->	
	<a name="query"></a><h3>query</h3>
	<div class="section">
		<p>
			Test for the <code>document.querySeletor</code>
		</p>
		<h4>Syntax</h4>
		<code>Browser.Features.query</code>
		<h4>Returns</h4>
		(boolean)
	</div>
	
	<a name="json"></a><h3>json</h3>
	<div class="section">
		<p>
			Test for the native JSON api
		</p>
		<h4>Syntax</h4>
		<code>Browser.Features.json</code>
		<h4>Returns</h4>
		(boolean)
	</div>
		
	<a name="inputtypes"></a><h3>inputtypes</h3>
	<div class="section">
		<h4>Syntax</h4>
		<code>Browser.Features.inputtypes</code>
		<h4>Returns</h4>
		<ul>
			<li>(object) - An object with the following properties			
				<ul>
					<li>search - (boolean)</li>
					<li>tel - (boolean)</li>
					<li>url - (boolean)</li>
					<li>email - (boolean)</li>
					<li>datetime - (boolean)</li>
					<li>date - (boolean)</li>
					<li>month - (boolean)</li>
					<li>week - (boolean)</li>
					<li>time - (boolean)</li>
					<li>datetime-local - (boolean)</li>
					<li>number - (boolean)</li>
					<li>range - (boolean)</li>
					<li>color - (boolean)</li>			
				</ul>
			</li>
			<li>(boolean) - false if the ua does not support a single html5 input type</li>
		</ul>
	</div>

	<a name="inputattributes"></a><h3>inputattributes</h3>
	<div class="section">
		<h4>Syntax</h4>
		<code>Browser.Features.inputattributes</code>
		<h4>Returns</h4>
		<ul>
			<li>(object) - An object with the following properties			
				<ul>
					<li>autocomplete - (boolean)</li>
					<li>autofocus - (boolean)</li>
					<li>list - (boolean)</li>
					<li>placeholder - (boolean)</li> 
					<li>max - (boolean)</li>
					<li>min - (boolean)</li>
					<li>multiple - (boolean)</li>
					<li>pattern - (boolean)</li>
					<li>required - (boolean)</li>
					<li>step - (boolean)</li>
				</ul>
			</li>
			<li>(boolean) - false if the ua does not support a single html5 input attribute</li>
		</ul>
	</div>
	
	<a name="fontface"></a><h3><span style="text-decoration: line-through">fontface</span></h3>
	<div class="section">
		<p>
			Deprecated: use <code>$extend(Browser.Features,{fontface: function(){...});</code> instead.
			Check for the <a href="http://paulirish.com/2009/font-face-feature-detection/">test function here</a><br />
			I did not include this test because it would make the file to heavy, since I try to keep it as small as posible.
		</p>
	</div>

</div>

<h2>Add more features and tests</h2>

<p>
	If you want, you can add more featues and test using the <a href="http://mootools.net/docs/core#extend">$extend</a> method of MooTools.
</p>
<pre class="js">
$extend(Browser.Features,{
	myTest: function(){
		return 1.0 === 1;
	}
});
</pre>



<h2>if-else in my CSS file, just like Modernizr</h2>

<p>
	This can be very handy. For example, you can put this in your 
	css file.
</p>

<pre class="css">

body.boxshadow #contentbox {
	box-shadow: 10px 10px 5px #888;
}

body.no-boxshadow #contentbox {
	/* extra fat border, as alternative */
	border: 10px black solid;
}</pre>
<p>
	And this in your javascript file / document head
</p>
<pre class="js">
window.addEvent('domready',function(){
	$each(Browser.Features, function(item,index){
		if(item){
			$(document.body).addClass(index);
		}else{
			$(document.body).addClass('no-'+index);
		}
	});
	
	// Or if you only want to check for some features you can do this
	['textshadow','borderradius'].each(function(item){
		if(Browser.Features[item]){
			$(document.body).addClass(item);
		}else{
			$(document.body).addClass('no-'+item);
		}
	});
	
});
</pre>

<h2>Enable HTML5 elements for styling in IE</h2>
<p>
	Add this code <em>before</em> the domready event
</p>
<pre class="js">
$extend(Browser,{
	
	enableHTML5: function(){
		elems = 'abbr article aside audio canvas datalist details eventsource figure footer'
		+' header hgroup mark menu meter nav output progress section time video';
		elems.split(' ').each(function(tag){
			new Element(tag);
		})
		mooModernizr.enableHTML5 = $lambda(true);
		return true;
	}
		
});

Browser.enableHTML5();
</pre>

<h2>Created by</h2>

<ul>
	<li>First of all: <a href="http://www.modernizr.com">Modernizr</a></li>
	<li>Thanks to <a href="http://diveintohtml5.org/detect.html">Dive Into HTML5</a> for some additional tests</li>
	<li>Author of the Mootools version: Arian Stolwijk: <a href="http://www.aryweb.nl">Aryweb webdevelopment</a></li>
</ul>

</body>
</html>
